<template>
  <div>
    <!-- 面包屑 -->
    <v-breadcrumb></v-breadcrumb>

    <!-- 添加按钮 -->
    <el-button type="primary" class="m20" size="default" @click="addItem"
      >添加</el-button
    >

    <!-- 列表 -->
    <v-list @edit="editItem"></v-list>

    <!-- 弹框 -->
    <v-dialog :info="info" @cancel="cancel" ref="dialog"></v-dialog>
  </div>
</template>
  
  <script setup>
//1.引入组件
import vList from "./list.vue";
import vDialog from "./dialog.vue";

//2.引入setup中所需内容
import { ref } from "vue";

//-----------------定义数据------------------------
//1.定义组件是否展示
let info = ref({
  isShow: false, //true-显示弹窗   false：关闭弹窗
  isAdd: true, //true--添加， false--编辑
});
let dialog = ref(null)
//------------------定义方法----------------------
//1.定义添加的方法
function addItem() {
  //显示弹框
  info.value.isShow = true;
  info.value.isAdd = true;
}

//2.取消方法
function cancel() {
  info.value.isShow = false;
}

//3.编辑
function editItem(id) {
  //显示弹框
  info.value.isShow = true;
  info.value.isAdd = false;

  //数据回显
  dialog.value.lookup(id);
}
</script>
  
  <style>
</style>